<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: lxf
  Date: 2016/6/28
  Time: 15:54
  To change this template use File | Settings | File Templates.
--%>
<html>
<head>
    <title>角色管理</title>
    <style>
        .priLabel {
            width: 90px;
            margin: 5px -5px;
        }
    </style>
</head>
<body>
<div id="roleContent">
    <button class="btn btn-default" @click="findRoleList">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>所有角色
    </button>
    <button class="btn btn-default" @click="addRole">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加角色
    </button>
    <br/>
    <table class="table table-hover">
        <thead>
        <th width="20%">角色名称</th>
        <th width="60%">角色权限</th>
        <th width="20%">操作</th>
        </thead>
        <tbody>
        <tr v-for="role in roles">
            <td>{{role.name}}</td>
            <td>
                <div class="row">
                    <div class="col-xs-2 col-md-2" v-for="privilege in role.privilegeNames">
                        <span class="glyphicon glyphicon-ok" aria-hidden="true"/>{{privilege}}
                    </div>
                </div>
            </td>
            <td>
                <a href="javascript:" @click="modifyRole(role)">修改</a>&nbsp;
                <a href="javascript:" @click="delRoleModel(role)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div>
    <input type="hidden" id="totalPage">
    <input type="hidden" id="currentPage">
    <ul id="pager"></ul>
</div>
<div class="modal fade" id="delRoleModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="resetPwd_title">删除角色</h4>
            </div>
            <div class="modal-body">
                确定要删除该角色?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="delRole()">
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>确定
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消
                </button>
            </div>
        </div>
    </div>
</div>
<myScript>
    <script type="text/javascript">
        var rolePojo;
        var roleModel = new Vue({
            el: '#roleContent',
            data: {
                roles: []
            },
            created: function () {
                console.log(' roleModel initing !');
            },
            methods: {
                findRoleList: function () {
                    $this = this;
                    $.ajax({
                        url: '/role/list/1',
                        type: 'get',
                        success: function (data) {
                            $this.roles = data.roleDTOs;
                            pageHandle(data.currentPage, data.totalPage);
                        }
                    })
                },
                addRole: function () {
                    location.href = "/role/form";
                },
                modifyRole: function (role) {
                    location.href = "/role/form/" + role.guid;
                },
                delRoleModel: function (role) {
                    rolePojo = role;
                    $('#delRoleModel').modal('toggle');
                },
                initPageInput: function (currentPage, totalPage) {
                    $('#currentPage').val(currentPage);
                    $('#totalPage').val(totalPage);
                }
            }
        });

        function pageHandle(currentPage, totalPage) {
            var options = {
                bootstrapMajorVersion: 3,
                currentPage: currentPage,
                totalPages: totalPage,
                size: "normal",
                alignment: "center",
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },
                onPageClicked: function (e, originalEvent, type, page) {
                    $.ajax({
                        url: '/admin/list/' + page,
                        type: 'get',
                        success: function (data) {
                            roleModel.roles = data.roleDTOs;
                            pageHandle(data.currentPage, data.totalPage);
                            roleModel.initPageInput(data.currentPage, data.totalPage);
                        }
                    })
                }
            }
            $("#pager").bootstrapPaginator(options);
        }

        function delRole() {
            $.ajax({
                url: '/role/del/' + rolePojo.guid,
                type: 'get',
                success: function (data) {
                    if (data) {
                        $('#delRoleModel').modal('hide');
                        roleModel.roles.$remove(rolePojo);
                        if (roleModel.roles.length <= 0) {
                            var page = $('#currentPage').val();
                            if (page > 1) {
                                $.ajax({
                                    url: '/role/list/' + (page - 1),
                                    type: 'get',
                                    success: function (data) {
                                        roleModel.roles = data.roleDTOs;
                                        pageHandle(data.currentPage, data.totalPage);
                                        roleModel.initPageInput(data.currentPage, data.totalPage);
                                    }
                                })
                            }
                        }
                    }
                }
            })
        }
    </script>
</myScript>
</body>
</html>
